<div class="apes-outsourcing-analysis">

  <!--外协分析-->
  <apes-card apesTitle="外协分析">

    <!--查询区-->
    <div apes-row [apesGutter]="16" class="apes-item" style="padding: 16px;">
      <formly-form [model]="outsourcingModel" [fields]="outsourcingField"></formly-form>
      <div apes-col [apesSpan]="4">
        <button apes-button [apesSize]="'default'" (click)="refreshOutsourcingData()">刷新</button>

<!--        <button apes-button [apesSize]="'default'" (click)="refreshAmountData()">测试</button>-->
      </div>
    </div>

    <!--展示区-->
    <div apes-row [apesGutter]="16">

      <div apes-col [apesSpan]="12">
        <apes-charts [id]="'outsourcing'" [data]="outsourcingData" [option]="outsourcingOption"
                     [loading]="outsourcingLoading" (clickChart)="clickOutsourcingChart($event)"></apes-charts>
      </div>

      <div apes-col [apesSpan]="12">
        <apes-charts [id]="'amount'" [data]="amountData" [option]="amountOption"
                     [loading]="amountLoading"></apes-charts>
      </div>

    </div>

    <div apes-row [apesGutter]="16" apesType="flex" apesJustify="center">

      <div apes-col [apesSpan]="12">

        <apes-table #rankTable
                    apesBordered
                    apesSize="small"
                    [apesScroll]="{ y: '500px' }"
                    [apesFrontPagination]="false"
                    [apesShowPagination]="false"
                    [apesLoading]="rankLoading"
                    [apesData]="rankData">
          <thead>
          <tr>
            <th style='width: 8%' [apesAlign]="'center'">TOP10</th>
            <th style='width: 36%' [apesAlign]="'center'">供应商</th>
            <th style='width: 15%' [apesAlign]="'center'">销售金额</th>
            <th style='width: 10%' [apesAlign]="'center'">数量</th>
            <th style='width: 15%' [apesAlign]="'center'">上月含税金额</th>
            <th style='width: 8%' [apesAlign]="'center'">同比</th>
            <th style='width: 8%' [apesAlign]="'center'">环比</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of rankTable.data">
            <td style='width: 8%' [apesAlign]="'center'">{{data.TOP}}</td>
            <td style='width: 36%' [apesAlign]="'center'">{{data.SUPPLIER}}</td>
            <td style='width: 15%' [apesAlign]="'center'">{{data.SALE_AMOUNT}}</td>
            <td style='width: 10%' [apesAlign]="'center'">{{data.AMOUNT}}</td>
            <td style='width: 15%' [apesAlign]="'center'">{{data.LASTAMOUNT}}</td>
            <td style='width: 8%' [apesAlign]="'center'">{{data.YEAR_RATE}}</td>
            <td style='width: 8%' [apesAlign]="'center'">{{data.MOUTH_RATE}}</td>
          </tr>
          </tbody>
        </apes-table>

      </div>

    </div>

  </apes-card>

  <!--派工时效分析-->
  <apes-card apesTitle="派工时效分析">

    <!--查询区-->
    <div apes-row [apesGutter]="16" class="apes-item" style="padding: 16px;">
      <formly-form [model]="agingModel" [fields]="agingField"></formly-form>
      <div apes-col [apesSpan]="4">
        <button apes-button [apesSize]="'default'" (click)="refreshAgingData()">刷新</button>
      </div>
    </div>

    <!--展示区-->
    <div apes-row [apesGutter]="16" apesType="flex" apesJustify="center">

      <div apes-col [apesSpan]="24">
        <apes-charts [id]="'aging'" [data]="agingData" [option]="agingOption"
                     [loading]="agingLoading"></apes-charts>
      </div>

      <div apes-col [apesSpan]="12">

        <apes-table #staffTable
                    apesBordered
                    apesSize="small"
                    [apesScroll]="{ y: '500px' }"
                    [apesFrontPagination]="false"
                    [apesShowPagination]="false"
                    [apesLoading]="staffLoading"
                    [apesData]="staffData">
          <thead>
          <tr>
            <th style='width: 10%' [apesAlign]="'center'">员工</th>
            <th style='width: 30%' colspan="2" class="colspan">
              <span>平均耗时</span>
              <span>较上一个月</span>
            </th>
            <th style='width: 30%' colspan="2" class="colspan">
              <span>总单数</span>
              <span>较上一个月</span>
            </th>
            <th style='width: 30%' colspan="2" class="colspan">
              <span>超时单数</span>
              <span>较上一个月</span>
            </th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of staffTable.data">
            <td style='width: 10%' [apesAlign]="'center'">{{data.EXECUTOR_NAME}}</td>
            <td style='width: 15%' [apesAlign]="'left'">{{data.TIME}}分钟</td>
            <td style='width: 15%' [apesAlign]="'right'" [ngClass]="showStaffClass(data.L_TIME,data.TIME)">
              <span *ngIf="showStaffClass(data.L_TIME,data.TIME) == 'showUp'">
                <i apes-icon apesType="arrow-up"></i>
              </span>
              <span *ngIf="showStaffClass(data.L_TIME,data.TIME) == 'showDown'">
                <i apes-icon apesType="arrow-down"></i>
              </span>
              <span>{{showStaffText(data.L_TIME,data.TIME,true)}}分钟</span>
            </td>
            <td style='width: 15%' [apesAlign]="'left'">{{data.AMOUNT}}</td>
            <td style='width: 15%' [apesAlign]="'right'" [ngClass]="showStaffClass(data.L_AMOUNT,data.AMOUNT)">
              <span *ngIf="showStaffClass(data.L_AMOUNT,data.AMOUNT) == 'showUp'">
                <i apes-icon apesType="arrow-up"></i>
              </span>
              <span *ngIf="showStaffClass(data.L_AMOUNT,data.AMOUNT) == 'showDown'">
                <i apes-icon apesType="arrow-down"></i>
              </span>
              <span>{{showStaffText(data.L_AMOUNT,data.AMOUNT,true)}}</span>
            </td>
            <td style='width: 15%' [apesAlign]="'left'">{{data.B_AMOUNT}}</td>
            <td style='width: 15%' [apesAlign]="'right'" [ngClass]="showStaffClass(data.L_B_AMOUNT,data.B_AMOUNT)">
              <span *ngIf="showStaffClass(data.L_B_AMOUNT,data.B_AMOUNT) == 'showUp'">
                <i apes-icon apesType="arrow-up"></i>
              </span>
              <span *ngIf="showStaffClass(data.L_B_AMOUNT,data.B_AMOUNT) == 'showDown'">
                <i apes-icon apesType="arrow-down"></i>
              </span>
              <span>{{showStaffText(data.L_B_AMOUNT,data.B_AMOUNT,true)}}</span>
            </td>
          </tr>
          </tbody>
        </apes-table>

      </div>

    </div>

  </apes-card>

</div>


